<template>
  <div class="layout">
    <aside class="sidebar">
      <div class="logo">在线商城系统</div>
      <el-menu :default-active="$route.path" router class="menu">
        <el-menu-item index="/admin/dashboard">数据看板</el-menu-item>
        <el-menu-item index="/admin/users">用户管理</el-menu-item>
        <el-menu-item index="/admin/products">商品管理</el-menu-item>
        <el-menu-item index="/admin/orders">订单管理</el-menu-item>
        <el-menu-item index="/admin/categories">分类管理</el-menu-item>
        <el-menu-item @click="logout" style="color: #f56c6c;">退出登录</el-menu-item>
      </el-menu>
    </aside>
    <div class="main">
      <header class="header">
        <div class="user-info">
          <span class="username">admin</span>
        </div>
      </header>
      <main class="content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const logout = () => {
  localStorage.removeItem('token');
  router.push('/login');
};
</script>

<style>
.layout {
  display: flex;
  height: 100vh;
  background: #f5f6fa;
}
.sidebar {
  width: 220px;
  background: #263445;
  color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 32px;
  box-shadow: 2px 0 8px rgba(0,0,0,0.03);
}
.logo {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 40px;
  letter-spacing: 2px;
}
.menu {
  border-right: none;
  background: transparent;
  width: 100%;
}
.el-menu {
  background: transparent;
  border-right: none;
}
.el-menu-item {
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  color: #fff;
  margin: 4px 0;
  border-radius: 0;
  transition: background 0.2s;
}
.el-menu-item.is-active,
.el-menu-item:hover {
  background: #1e2a38 !important;
  color: #409EFF !important;
}
.el-menu-item[style*='color: #f56c6c'] {
  color: #f56c6c !important;
}
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f5f6fa;
}
.header {
  height: 56px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 32px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.username {
  font-weight: bold;
  color: #333;
}
.content {
  flex: 1;
  padding: 32px;
  overflow: auto;
  background: #f5f6fa;
}
</style> 